﻿@layout EmptyLayout
@page "/"

<div class="page-wrapper">

    <header class="header text-center">
        <div class="container">
            <div class="branding">
                <h1 class="logo">
                    <span aria-hidden="true" class="icon_documents_alt icon"></span>
                    <span class="text-highlight">Blazor.</span><span class="text-bold">Diagrams</span>
                </h1>
            </div>
            <div class="tagline">
                <p>A fully customizable and extensible all-purpose diagrams library for Blazor</p>
            </div>

            <div class="social-container">
                <div class="github-btn mb-2">
                    <iframe src="https://ghbtns.com/github-btn.html?user=Blazor-Diagrams&repo=Blazor.Diagrams&type=star&count=true&size=large"
                            frameborder="0" scrolling="0" width="130" height="30" title="GitHub"></iframe>
                    <iframe src="https://ghbtns.com/github-btn.html?user=Blazor-Diagrams&repo=Blazor.Diagrams&type=watch&count=true&size=large&v=2"
                            frameborder="0" scrolling="0" width="140" height="30" title="GitHub"></iframe>
                    <iframe src="https://ghbtns.com/github-btn.html?user=Blazor-Diagrams&repo=Blazor.Diagrams&type=fork&count=true&size=large&v=2"
                            frameborder="0" scrolling="0" width="80" height="30" title="GitHub"></iframe>
                </div>
            </div>
        </div>
    </header>

    <section class="cards-section text-center">
        <div class="container">
            <h2 class="title">Getting started is easy!</h2>
            <div class="intro">
                <p>Welcome to <b>Blazor.Digrams</b>, feel free to check out the documentation or try the demos!</p>
                <div class="cta-container">
                    <a href="https://nuget.org/packages/Z.Blazor.Diagrams"
                       target="_blank">
                        <img src="https://img.shields.io/nuget/dt/Z.Blazor.Diagrams?style=for-the-badge" alt="Badge" />
                    </a>
                </div>
            </div>
            <div id="cards-wrapper" class="cards-wrapper row">
                <div class="item item-green col-lg-4 col-6">
                    <div class="item-inner">
                        <div class="icon-holder">
                            <i class="icon fa fa-paper-plane"></i>
                        </div>
                        <h3 class="title">Quick Start</h3>
                        <p class="intro">Get started with a simple and straight forward tutorial</p>
                        <a class="link" href="quickstart"><span></span></a>
                    </div>
                </div>
                <div class="item item-primary item-2 col-lg-4 col-6">
                    <div class="item-inner">
                        <div class="icon-holder">
                            <span aria-hidden="true" class="icon icon_puzzle_alt"></span>
                        </div>
                        <h3 class="title">Demos</h3>
                        <p class="intro">Discover Blazor.Diagrams by checking out the demos and samples</p>
                        <a class="link" href="demos/simple"><span></span></a>
                    </div>
                </div>
                <div class="item item-pink item-2 col-lg-4 col-6">
                    <div class="item-inner">
                        <div class="icon-holder">
                            <span aria-hidden="true" class="icon fa fa-sliders-h"></span>
                        </div>
                        <h3 class="title">Customization</h3>
                        <p class="intro">Learn how to customize Z.Blazor.Diagrams to your needs, starting with nodes and links.</p>
                        <a class="link" href="customization"><span></span></a>
                    </div>
                </div>
                <div class="item item-purple item-2 col-lg-4 col-6">
                    <div class="item-inner">
                        <div class="icon-holder">
                            <span aria-hidden="true" class="icon fa fa-cogs"></span>
                        </div>
                        <h3 class="title">Options</h3>
                        <p class="intro">A list of all the available diagram options, as well as their descriptions.</p>
                        <a class="link" href="options"><span></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<footer class="footer text-center">
    <div class="container">
        <small class="copyright">Designed with <i class="fas fa-heart"></i> by <a href="https://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
    </div>
</footer>